<template>
  <!-- 顶部滚动选项卡 -->
  <scroll-view
    scroll-x
    class="scroll-row"
    :scroll-into-view="scrollinview"
    :scroll-with-animation="true"
  >
    <view
      v-for="(item, index) in tabs"
      :key="index"
      class="scroll-row-item"
      :id="'item' + index"
      :class="tabindex === index ? 'color1' : ''"
      @tap="changeTab(index)"
    >{{ item.mingchen }}</view>
  </scroll-view>
  <!-- 滚动条 -->
  <swiper
    class="swiper"
    :duration="150"
    :current="tabindex"
    @change="onchangeTab"
    :style="'height:' + listHeight + 'px'"
  >
    <swiper-item v-for="(item2, index1) in newslist" :key="index1">
      <view class="swiper-item">
        <scroll-view scroll-y :style="'height:' + listHeight + 'px'">
          <view v-for="(item1, index1) in item2.neiron" :key="index1">
            <view style="font-size: 35rpx; color: black">
              {{
              item1[0].ctime.substring(0, 10)
              }}
            </view>

            <view
              v-for="(item, index) in item1"
              :key="index"
              :class="item.kaostitle ? 'fshu' : ''"
              @tap="chankanxianqing(item)"
            >
              <!-- 列表 -->
              <view class="ziti">
                {{
                item.kaostitle ? item.kaostitle : ''
                }}
              </view>

              <image
                class="image_6"
                src="https://haoyigou-1318705369.cos.ap-guangzhou.myqcloud.com/%E4%B8%89%E7%82%B9.png"
              />

              <!-- 分割线 -->
            </view>
            <view
              :style="
                newslist.neiron ? 'height: 15rpx; background-color: #dbd8d8; margin-top: 10rpx' : ''
              "
            ></view>
          </view>
        </scroll-view>
      </view>
    </swiper-item>
  </swiper>
</template>

<script lang="ts" setup>
import uniPopup from '../../components/components/uni-popup/uni-popup.vue'
// import uCollapse from '../../components/vk-uview-ui_1.5.2/components/u-collapse/u-collapse.vue'
// import uCollapseItem from '../../components/vk-uview-ui_1.5.2/components/u-collapse-item/u-collapse-item.vue'

import { getWrong } from '../../services/kaosi'
import { onLoad, onPageScroll, onShow } from '@dcloudio/uni-app'
import { guanzhuStore, myStore, ShouyeStore } from '@/stores'
import { reactive, ref, toRefs } from 'vue'
// 计算高度
// 默认列表高度
const listHeight = ref(800)
// 滚动条滑动
const onchangeTab = (e) => {
  changeTab(e.detail.current)
}
const changeTab = async (index) => {
  // if (tabindex.value === index) return
  // 选项卡点击
  tabs.value[index].active = 'true'
  // 选项卡点击，tabindex要等于e.index
  tabindex.value = index
  // 滚动到指定元素

  scrollinview.value = 'item' + index
  // 获取历史数据
  let res1: any = await getWrong({ user: user.userinfo, item: tabs.value[index].mingchen })

  dateString.value = res1.data[0][0].ctime.substring(0, 10)
  newslist.value.map((obj) => {
    if (tabs.value[index].mingchen == obj.kechen) {
      obj.neiron = res1.data
      console.log(obj.neiron, '666')
    }
  })
  console.log(res1.data[0].ctime, '777')
}
onLoad(async () => {
  // 提示按确认

  // 选项卡点击，tabindex要等于e.index
  // scrollinview.value = 'item' + tabindex.value
  uni.getSystemInfo({
    success: (res) => {
      console.log(res.windowHeight, '可视话高度')

      listHeight.value = res.windowHeight - uni.upx2px(201)
    },
  })
})
onShow(async () => {
  changeTab(0)
})
const dateString = ref('')
const nianji1 = ShouyeStore()
const user = myStore()
const newslist = ref<any>([
  { kechen: '数学', neiron: [] },
  { kechen: '语文', neiron: [] },
  { kechen: '英语', neiron: [] },
  { kechen: '物理', neiron: [] },
  { kechen: '化学', neiron: [] },
])
const tabindex = ref(0)
const tabs = ref<any>([
  { mingchen: '数学' },
  { mingchen: '语文' },
  { mingchen: '英语' },
  { mingchen: '物理' },
  { mingchen: '化学' },
])
//改变tabIndex
const scrollinview = ref('')

const chankanxianqing = (item) => {
  console.log(item)
  uni.navigateTo({
    url: '../../pagesB/timucuotixianqin/index?item1=' + encodeURIComponent(JSON.stringify(item)),
  })
}
</script>

<style scoped lang="scss">
@import url('../../static/assets/wxss/iconfont.css');
@import url('../../components/animate.min.css');
.mt-1 {
  margin-top: 1.81rpx;
}
.page {
  background-color: #ffffff;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
}
.group_3 {
  padding: 47.1rpx 68.84rpx 1275.36rpx;
  overflow-y: auto;
}
.text_4 {
  color: #3e3e3e;
  font-size: 28.99rpx;
  font-family: AlimamaShuHeiTi;
  line-height: 27.25rpx;
}
.image_6 {
  margin: 30rpx;

  width: 6.62rpx;
  height: 25.74rpx;
}
.text_5 {
  margin-right: 485.51rpx;
  margin-top: 21.74rpx;
  color: #b2bdc4;
  font-size: 23.55rpx;
  font-family: AlimamaShuHeiTi;
  line-height: 17.1rpx;
}
.daxiao {
  // 左右间距20px
  margin-left: 15px;
  // 图标变大
  font-size: 25px;
}
.scroll-row {
  width: 100%;
  white-space: nowrap;
  height: 150rpx;
  background-color: #3e3c6d;
  border-bottom-width: 1rpx;
  border-bottom-style: solid;
  border-bottom-color: #dee2e6;
}
.scroll-row-item {
  display: inline-block !important;
  padding-top: 50rpx;
  padding-bottom: 20rpx;
  padding-left: 50rpx;
  padding-right: 50rpx;
  font-size: 35rpx;
  color: #ffffff;
}
.color1 {
  color: rgb(255, 60, 0);
  font-size: 40rpx;
  font-weight: 700;
}

/*  */

.swiper {
  height: 1000rpx;
}
.loadmore {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100rpx;
  background-color: #f9f5f5;
  padding: 30rpx;
}
.font {
  font-size: 30rpx;
  color: #a9a5a0;
}
// 聊天图标的红点
.weizhi {
  position: absolute;
  top: 15rpx;
  right: 15rpx;
  width: 20rpx;
  height: 20rpx;
  border-radius: 50%;
  background-color: rgb(30, 125, 219);
}
.fshu {
  // 加粗
  // 省略号
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: 30rpx;
  display: flex;
  justify-content: space-between;
  //
  margin-top: 30rpx;
  // 底部线条
  border-bottom: 1px solid #373333;
  width: 100%;
  height: 100rpx;
  // 圆润
  border-radius: 13rpx;
  // 背景颜色
  // background-color: rgb(208, 199, 199);
  margin-right: 40rpx;
  padding: 20rpx;
}
.ziti{
  //字体省略，
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  font-size: 30rpx;
  width: 60%;
}
</style>
